<template>
    <div class="ys-teamcell">
        <div >
            <ul >
                <li v-for="(item,index) in teamList" class="page-infinite-listitem flex-layout"
                    @click="goTeamHomePage(index)">
                    <div class="ranking" :class="{['top-three-ranking' + index]:item.isTopThree}">{{index + 1}}</div>

                    <div class="team-number flex">
                        <div class="name"><span>{{item.name}}</span></div>
                        <div class="people-number"><span>{{item.count}}人参与</span></div>
                    </div>

                    <span class="walking-number" :class="{'top-three':item.isTopThree}">{{item.formatStep || item.stepAvg}}</span>
                    <div class="like" @click.stop = 'giveLike(index)'  :class = "{'liked':item.isUpVote}">
                        <span>{{item.upVote}}</span>
                        <div> <i class="iconfont icon-heart"></i></div>
                    </div>
                </li>
            </ul>
            <p v-show="loading" class="page-infinite-loading">
                <mt-spinner type="fading-circle"></mt-spinner>
                加载中...
            </p>
        </div>
    </div>
</template>

<script type="text/babel">
    import util from '../assets/util'
    import config from '../assets/config.js'

    export default {
        data() {
            return {
                loading: false,
                allLoaded: false,
                wrapperHeight: 0,
                isFinished:true,
                teamList: [],
                pageInfo: {
                    page: 1,
                    size: 10
                },
                deptUpVoteUrl:config.host + config.deptUpVote
            };
        },

        props:{
            teamUrl:String,
            isShow:Boolean,
            date:{
                type:String,
                default:util.formatDate(null, '-')
            }
        },
        created(){
            this.loading = true;
            this.initTeamData();
        },

        methods: {
            initTeamData(){
                this.$http.get(this.teamUrl,{
                    params:{
                        page: this.pageInfo.page,
                        size: this.pageInfo.size,
                        date: this.date
                    }
                }).then((res)=>{
                    this.loading = false;
                    this.formatTeamStep(res.data.list);

                    this.teamList = res.data.list;

                    let length = this.teamList.length;

                    if(length) {
                        this.$eventBus.$emit('firstTeam', res.data.list[0]);
                    }

                    if(length < this.pageInfo.size) {
                            this.isFinished = true;
                            this.$eventBus.$emit('loadComplete:team');
                            this.loading = false;
                    } else {
                            this.isFinished = false;
                            this.pageInfo.page ++;
                    }

                    for (let i =0;i<3;i++){
                        if(this.teamList[i]) {
                            this.teamList[i].isTopThree = true;
                        }
                    }



                }).catch((res) => {
                    this.loading = false;
                });
            },

            loadMore() {
                //防止多次加载
                if(this.loading) return;
                this.loading = true;
                this.$http.get(this.teamUrl, {
                    params:this.pageInfo
                }).then((res)=>{
                    this.loading = false;

                    this.formatTeamStep(res.data.list);

                    let length = res.data.list.length;

                    if (length) {
                        this.teamList = this.teamList.concat(res.data.list);
                    }

                    if(length < this.pageInfo.size) {
                        this.isFinished = true;
                        this.$eventBus.$emit('loadComplete:team');
                        this.loading = false;
                    } else {
                        this.pageInfo.page ++;
                        this.isFinished = false;
                    }

                }).catch((res) => {
                    console.log(res);
                    this.loading = false;
                });

            },

            giveLike(i){
                var me = this;

                let rowdata = this.teamList[i];
                let userInfo = util.session.get('sport-user-info');

                this.$http.post(this.deptUpVoteUrl,
                    {id : this.teamList[i].id}
                ).then((res)=>{
                    if (res.data.code === 0) {
                        if(res.data.data.upVote > 9999){
                            this.teamList[i].upVote = 9999 + "+";
                        }else {
                            this.teamList[i].upVote = res.data.data.upVote;
                        }
                        this.teamList[i].isUpVote = res.data.data.isUpVote;
                    }
                }).catch((res) => {

                });
            },

            goTeamHomePage(i){
                let rowData = this.teamList[i];
                util.session.set('dep-row-data',rowData);
                this.$router.push({path:'/teamHomePage'});
            },

            formatTeamStep(array){
                array.forEach(function (item) {
                    if(item.stepAvg > 9999){
                        item.formatStep = util.formatNumber(item.stepAvg);
                    }
                    if(item.upVote > 9999) {
                        item.upVote = '9999+';
                    }
                })
            },
            initEvent() {
                let me = this;
                this.$eventBus.$on('loadMore:team', function () {
                    me.loadMore();
                })
            }
        },
        mounted() {
            this.initEvent();
        }

    };
</script>
<style>
    .page-infinite-list {
        background: #fff;
    }
    .ys-teamcell {
        background: #fff;
    }
    .ys-teamcell .page-infinite-listitem{
        display:flex;
        align-items:center;
        height: 58px;
        border-bottom: solid 1px #eee;
        text-align: center;
        list-style-type: none;
    }
    .ys-teamcell .page-infinite-list li:first-child{
        border-top: solid 1px #eee;
    }
    .ys-teamcell .team-number{
        display: inline-block;
        margin-left: 20px;
        width: 96px;
    }
    .ys-teamcell .team-number .name{
        text-align: left;
        font-size: 16px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .ys-teamcell .team-number .people-number{
        font-size: 12px;
        color: #9E9E9E;
        text-align: left;
    }
    .ys-teamcell .ranking{
        width: 22px;
        height: 22px;
        margin-left: 10px;
        color: #262626;
        font-size: 14px;
        line-height: 22px;
        background-size: cover;
    }

    /*.ys-teamcell .top-three-ranking0{
        color: #FFFFFF !important;
        background-image: url("../assets/img/badge01@2x.png");
    }
    .ys-teamcell .top-three-ranking1{
        color: #FFFFFF !important;
        background-image: url("../assets/img/badge02@2x.png");
    }
    .ys-teamcell .top-three-ranking2{
        color: #FFFFFF !important;
        background-image: url("../assets/img/badge03@2x.png");
    }*/

    .ys-teamcell .like{
        display: inline-block;
        margin-left: 12px;
        width: 70px;
        height:58px;
        color: #CCCCCC;
        padding-top:15px;
    }
    .ys-teamcell .liked .iconfont{
        color: #FB5E71;
    }
    .ys-teamcell .top-three{
        color: #29B6F6;
    }
    .ys-teamcell .like span{
        font-size: 12px;
        text-align: left;
    }
    .ys-teamcell .iconfont{
        font-size: 16px;
    }
    .ys-teamcell .name{
        color: #262626;
    }
    .ys-teamcell .walking-number{
        font-size: 21px;
        text-align: right;
        width:70px;
        margin-left:10px;
    }
    .ys-teamcell .page-infinite-loading{
        text-align: center;
        height: 50px;
        line-height: 50px;
    }
    .ys-teamcell .page-infinite-loading div {
        display: inline-block;
        vertical-align: middle;
        margin-right: 5px;
    }
</style>
